<template>
  <!-- 搜索框的封装 -->
  <div class="SearchBoxContainer">
    <a v-if="haveLogo" class="logo" href="javascript:;"></a>
    <van-search
        v-bind="$attrs"
        v-on="$listeners"
        class="search"
        :disabled="isDisabled"
        placeholder="请输入搜索关键词"
        :show-action="haveCancel"
        @click="toSearch">
    </van-search>
    <!-- HintButton -->
  </div>
</template>
<!--<SearchBox :isDisabled="false" :HaveCancel="false" :HaveLogo="false"></SearchBox>-->
<script>
export default {
  name: "SearchBox",
  props: {
    isDisabled: {//控制是否可以输入搜索
      type: Boolean,
      default: true
    },
    haveCancel:{//控制是否显示取消按钮
      type: Boolean,
      default: false
    },
    haveLogo:{//控制是否显示LOGO
      type: Boolean,
      default: true
    },
  },
  methods: {
    toSearch() {
      if (!this.$route.path.startsWith('/search')){
        this.$router.push('/search')
      }
    },
  }
}
</script>

<style lang="less" scoped>
.SearchBoxContainer {
  height: 44px;
  background-color:#ffffff;
  display: flex;
  padding: 8px 15px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
  .logo {
    display: block;
    // vertical-align: middle;
    height: 20px;
    width: 69px;
    background-image: url("~@/assets/images/home/hxm_yanxuan-node-wap_style_img_index.png");
    background-size: 188px 188px;
    background-position: -63px -126px;
    margin-right: 12px;
  }

  .search{
      padding:0;
      border-radius:6px;
      flex:1;
    ::v-deep .van-search__content {
      display:flex;
      align-items: center;
      background-color: #EDEDED;
      border-radius:4px;
      height: 28px;
    }
  }

  .cancel {
    font-size: 14px;
    margin-left: 12px;
  }
}

</style>
